<template>
  <div class="chart-container">
    <!-- 累计趋势收益图组件 -->
    <Trend></Trend>
    <!-- 第二行 -->
    <el-row class="mt-20" :gutter="20">
      <el-col :span="16">
        <!-- 日金额分析图 -->
        <HorizontalBar></HorizontalBar>
      </el-col>
      <el-col :span="8">
        <!-- 日历图 -->
        <Calendar></Calendar>
      </el-col>
    </el-row>
    <!-- 第三行 -->
    <el-row class="mt-20" :gutter="20">
      <el-col :span="6">
        <div>
          <!-- 饼图 -->
          <Pie></Pie>
          <!-- 文档云图 -->
          <WordCloud class="mt-20"></WordCloud>
        </div>
      </el-col>
      <el-col :span="18">
        <!-- 地图可视化 -->
        <BMap></BMap>
      </el-col>
    </el-row>
    <!-- s2 表格数据图示 -->
    <TableSheet class="mt-20"></TableSheet>
  </div>
</template>

<script setup>
import Trend from './components/trend/index.vue'
import HorizontalBar from './components/horizontal-bar/index.vue'
import Calendar from './components/calendar/index.vue'
import Pie from './components/pie/index.vue'
import WordCloud from './components/word-cloud/index.vue'
import BMap from './components/b-map/index.vue'
import TableSheet from './components/table-sheet/index.vue'
</script>

<style scoped lang="scss">
.mt-20 {
  margin-top: 20px;
}
</style>
